<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue.js - 基础</title>
    <style>
        .slide-enter-active,
        .slide-leave-active {
            transition: transform .5s;
        }

        .slide-enter{
            transform: translateX(1200px);
        }

        .slide-enter-to{
            transform: translateX(0px);
        }
        .slide-leave{
            transform: translateX(-1200px);
        }
        .slide-leave-to

        /* .fade-leave-active below version 2.1.8 */
            {
            transform: translateX(-1200px);
        }

        .container{
            position: relative;
            width: 1200px;
        }
        .view{
            position: absolute;
            left: 0;
            width: 1200px;
            background-color: #f1f1f1;
            border: 2px solid red;
            height: 400px;
        }
    </style>
</head>

<body>
    <div id="app">
        <router-link to="/">首页</router-link>
        <router-link to="/video">视频</router-link>
        <router-link to="/music">音乐</router-link>
        <router-link to="/photo">美图</router-link>
        <router-link to="/mine">关于我</router-link>

        <!-- 5.设置一个路由展示容器  -->
        <div class="container">
            <transition name="slide">
                <router-view class="view"></router-view>
        </transition>
        </div>
    </div>

    <!-- 引入vue框架 开发版 :包含警告 和调试信息 -->
    <script src="../../lib/vue.js"></script>
    <script src="../../lib/vue-router.js"></script>
    <script>
        //1.先为路由页面创建组件
        const Home = {
            template: `<div>这是首页</div>`
        }
        const Video = {
            template: `<div>这是视频</div>`
        }
        const Music = {
            template: `<div>这是音乐</div>`
        }
        const Photo = {
            template: `<div>这是美图</div>`
        }
        const Mine = {
            template: `<div>这是关于我</div>`
        }

        const Login = {
            template: `<div>这是登录页面!!!!! (访问需要登录的页面 ,如果没有登录 都会被送过来!!!)</div>`
        }
        

        //2.创建路由表 (进行访问地址和组件的关联关系的表(映射))
        const routes = [
            {
                path: "/",
                component: Home
            },
            {
                path: "/video",
                component: Video,
                meta:{//元数据 (其实都是自定义的)
                   requiresAuth:true,//设置当前路由需要登录后才能访问     
                }
            },
            {
                path: "/music",
                component: Music,
                meta:{//元数据 (其实都是自定义的)
                   requiresAuth:true,//设置当前路由需要登录后才能访问     
                }
            },
            {
                path: "/photo",
                component: Photo,
                meta:{//元数据 (其实都是自定义的)
                   requiresAuth:true,//设置当前路由需要登录后才能访问     
                }
            },
            {
                path: "/mine",
                component: Mine
            },
            {
                path: "/login",
                component: Login
            }
        ];

        //3.创建vue 路由对象
        const router = new VueRouter({
            mode: "hash", //设置使用路由的模式 : hash(默认) / history / abstract (node.js环境中) 
            routes,// 配置当前路由实例的路由表
            fallback: true, //当浏览器不支持 history 模式控制路由是否应该回退到 hash 模式

        })

        /********************* (全局 : 所有的路由都会生效)路由守卫钩子 *****************************/
        const isLogin = false;//假设一个登录标记

        //[配置一个] 全局前置守卫钩子 (在访问一个路由之前触发的钩子函数)
        router.beforeEach((to, from, next) => {//to 即将要进入到的路由对象  from 从哪个路由跳转 next()  执行下一步的方法(不调用不继续往下走)
            // console.log('路由前置钩子', to, from)
            // // setTimeout(()=>{
            // next();//执行下一步 路由解析(不执行不会解析跳转路由和渲染路由内容) 
            // // },3000)

            /**
             *  登录拦截 = > 就是针对访问的路由地址 进行地址的是否需要登录权限访问的校验, 如果针对于需要登录访问的路由,如果没有登录则实行拦截, 直接重定向到登录页!
             *  
             *       在to.matched 属性 返回的是当前路由 及当前路由下所有的嵌套路由
             *       校验逻辑: 如果一个父路由都需要登录 ,那么对应的子路由应当都需要登录验证   
             * */
               
            //  console.log(to.matched.some((item)=>item.meta.requiresAuth))
                //判断当前即将访问的路由是否需要登录权限
                if(to.matched.some((item)=>item.meta.requiresAuth)){ // 需要登录后才能访问
                    //判断当前访问用户是否已经登录(没有登录则跳转到登录页 , 如果已经登录next)
                    if(isLogin){ //已经登录
                        next();
                    }else{//没有登录
                        next({
                            path:'/login'
                        })
                    }
                }else{ //不需要登录即可访问
                    next();
                }

        })

        /********************* 路由守卫钩子 *****************************/

        //vm 就是根组件
        let vm = new Vue({
            el: "#app",//指定Vue挂载的DOM
            data: {//当前vue实例中使用的数据

            },
            router,// 4. 将vue路由对象挂载到对应的vue实例对象
            methods: {//当前Vue实例中使用到的方法

            }
        })
    </script>
</body>

</html>